<template>
  <div class="base-card-item flex" :style="{backgroundColor: styles.bgColor}">
    <div class="flex-margin flex w100 load-animation">
      <div class="flex-auto">
        <span :style="{fontSize: styles.totalFontSize, color: styles.color}">{{ requestData[data[0]['key']] }}</span>
        <div class="mt10" :style="{color: styles.color}">{{ requestData[data[1]['key']] }}</div>
      </div>
      <div class="home-card-item-icon flex" :style="{backgroundColor: styles.iconBgColor}">
        <i class="flex-margin" :class="styles.icon"
           :style="{ color: `${styles.iconColor}` ,fontSize: styles.iconSize ?? '40px'}"></i>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, onBeforeMount, reactive, toRefs, watch} from "vue";
import request from "/@/utils/request";
import {WidgetList} from './widget'

export default defineComponent({
  name: 'cardWidget',
  props: {
    isEdit: {
      type: Boolean,
      default: () => false
    },
    editData: {
      type: Object,
      default: () => {
        return WidgetList.card
      }
    },
    widgetId: {
      type: String,
      default: () => ''
    }
  },
  setup(props, {emit}) {
    const state = reactive({
      requestData: {
        total: 0,
        title: 'none',
      },
      styles: WidgetList.card.styles,
      api: null,
      data: WidgetList.card.data,
    });
    watch(
        () => props.editData,
        (newVal, oldVal) => {
          // console.log(newVal)
        })
    const setEditData = () => {
      if (props.editData.styles != null) state.styles = props.editData.styles
      if (props.editData.api != null) state.api = props.editData.api
      if (props.editData.data != null) state.data = props.editData.data
    }
    onBeforeMount(() => {
      if (props.isEdit) {
        setEditData()
      } else {
        const _widgets = localStorage.getItem('widgets')
        if (_widgets) {
          const widgets = JSON.parse(_widgets)
          for (const _widget of widgets) {
            if (_widget.id == props.widgetId) {
              if (_widget.styles != null) state.styles = _widget.styles
              if (_widget.api != null) state.api = _widget.api
              if (_widget.data != null) state.data = _widget.data
              getApiData()
            }
          }
        }
      }
    });
    const getApiData = () => {
      if (state.api == null || state.api == '') return
      request({
        url: state.api,
        method: 'get',
        params: {}
      }).then(res => {
        state.requestData = res.data
      })
    };
    return {
      ...toRefs(state),
    };
  }
});
</script>

<style scoped lang="scss">
.base-card-item {
  width: 100%;
  height: 130px;
  border-radius: 10px;
  transition: all ease 0.3s;
  padding: 20px;
  overflow: hidden;
  background: var(--el-color-white);
  color: var(--el-text-color-primary);
  border: 1px solid var(--next-border-color-light);

  &:hover {
    box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }

  &-icon {
    width: 90px;
    height: 90px;
    border-radius: 100%;
    flex-shrink: 1;
    font-size: 40px;

    i {
      color: var(--el-text-color-placeholder);
    }
  }

  &-title {
    font-size: 15px;
    font-weight: bold;
    height: 30px;
  }

  .load-animation {
    opacity: 0;
    animation-name: error-num;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-delay: 0.2s;

    .home-card-item-icon {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      flex-shrink: 1;
    }
  }
}
</style>
